<div class="flex flex-col flex-auto items-center sm:justify-center min-w-0 md:p-8">
    <div class="flex md:w-full md:max-w-6xl sm:rounded-2xl sm:shadow overflow-hidden sm:bg-card">
        <div class="w-full sm:w-auto py-8 px-4 sm:p-12 md:p-16">
            <div class="w-full max-w-80 sm:w-80 mx-auto sm:mx-0">
                <!-- Logo -->
                <div class="w-12">
                    <img src="assets/images/logo/logo.png">
                </div>

                <!-- Title -->
                <div class="mt-8 text-4xl font-extrabold tracking-tight leading-tight">Sign up</div>
                <div class="flex items-baseline mt-0.5 font-medium">
                    <div>Already have an account?</div>
                    <a
                        class="ml-1 text-primary-500 hover:underline"
                        [routerLink]="['/pages/authentication/sign-in']">Sign in
                    </a>
                </div>

                <!-- Alert -->
                <fuse-alert
                    class="mt-8 -mb-4"
                    *ngIf="showAlert"
                    [appearance]="'outline'"
                    [showIcon]="false"
                    [type]="alert.type"
                    [@shake]="alert.type === 'error'">
                    {{alert.message}}
                </fuse-alert>

                <!-- Sign Up form -->
                <form
                    class="mt-8"
                    [formGroup]="signUpForm">

                    <!-- Name field -->
                    <mat-form-field class="w-full">
                        <mat-label>Full name</mat-label>
                        <input
                            id="name"
                            matInput
                            [formControlName]="'name'">
                        <mat-error *ngIf="signUpForm.get('name').hasError('required')">
                            Full name is required
                        </mat-error>
                    </mat-form-field>

                    <!-- Email field -->
                    <mat-form-field class="w-full">
                        <mat-label>Email address</mat-label>
                        <input
                            id="email"
                            matInput
                            [formControlName]="'email'">
                        <mat-error *ngIf="signUpForm.get('email').hasError('required')">
                            Email address is required
                        </mat-error>
                        <mat-error *ngIf="signUpForm.get('email').hasError('email')">
                            Please enter a valid email address
                        </mat-error>
                    </mat-form-field>

                    <!-- Password field -->
                    <mat-form-field class="w-full">
                        <mat-label>Password</mat-label>
                        <input
                            id="password"
                            matInput
                            type="password"
                            [formControlName]="'password'"
                            #passwordField>
                        <button
                            mat-icon-button
                            type="button"
                            (click)="passwordField.type === 'password' ? passwordField.type = 'text' : passwordField.type = 'password'"
                            matSuffix>
                            <mat-icon
                                class="icon-size-5"
                                *ngIf="passwordField.type === 'password'"
                                [svgIcon]="'heroicons_solid:eye'"></mat-icon>
                            <mat-icon
                                class="icon-size-5"
                                *ngIf="passwordField.type === 'text'"
                                [svgIcon]="'heroicons_solid:eye-off'"></mat-icon>
                        </button>
                        <mat-error>
                            Password is required
                        </mat-error>
                    </mat-form-field>

                    <!-- Company field -->
                    <mat-form-field class="w-full">
                        <mat-label>Company</mat-label>
                        <input
                            id="company-confirm"
                            matInput
                            [formControlName]="'company'">
                    </mat-form-field>

                    <!-- ToS and PP -->
                    <div class="inline-flex items-end w-full mt-1.5">
                        <mat-checkbox
                            [color]="'primary'"
                            [formControlName]="'agreements'">
                            <span>I agree to the</span>
                            <a
                                class="ml-1 text-primary-500 hover:underline"
                                [routerLink]="['./']">Terms of Service
                            </a>
                            <span>and</span>
                            <a
                                class="ml-1 text-primary-500 hover:underline"
                                [routerLink]="['./']">Privacy Policy
                            </a>
                        </mat-checkbox>
                    </div>

                    <!-- Submit button -->
                    <button
                        class="fuse-mat-button-large w-full mt-6"
                        mat-flat-button
                        [color]="'primary'"
                        [disabled]="signUpForm.disabled"
                        (click)="signUp()">
                        <span *ngIf="!signUpForm.disabled">
                            Create your free account
                        </span>
                        <mat-progress-spinner
                            *ngIf="signUpForm.disabled"
                            [diameter]="24"
                            [mode]="'indeterminate'"></mat-progress-spinner>
                    </button>

                </form>
            </div>
        </div>
        <div class="relative hidden md:flex flex-auto items-center justify-center h-full p-16 lg:px-28 overflow-hidden bg-gray-800 dark:border-l">
            <!-- Background - @formatter:off -->
            <!-- Rings -->
            <svg class="absolute inset-0 pointer-events-none"
                 viewBox="0 0 960 540" width="100%" height="100%" preserveAspectRatio="xMidYMax slice" xmlns="http://www.w3.org/2000/svg">
                <g class="text-gray-700 opacity-25" fill="none" stroke="currentColor" stroke-width="100">
                    <circle r="234" cx="196" cy="23"></circle>
                    <circle r="234" cx="790" cy="491"></circle>
                </g>
            </svg>
            <!-- Dots -->
            <svg class="absolute -top-16 -right-16 text-gray-700"
                 viewBox="0 0 220 192" width="220" height="192" fill="none">
                <defs>
                    <pattern id="837c3e70-6c3a-44e6-8854-cc48c737b659" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
                        <rect x="0" y="0" width="4" height="4" fill="currentColor"></rect>
                    </pattern>
                </defs>
                <rect width="220" height="192" fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)"></rect>
            </svg>
            <!-- @formatter:on -->
            <!-- Content -->
            <div class="z-10 relative w-full max-w-2xl">
                <div class="text-7xl font-bold leading-none text-gray-100">
                    <div>Welcome to</div>
                    <div>our community</div>
                </div>
                <div class="mt-6 text-lg tracking-tight leading-6 text-gray-400">
                    Fuse helps developers to build organized and well coded dashboards full of beautiful and rich modules.
                    Join us and start building your application today.
                </div>
                <div class="flex items-center mt-8">
                    <div class="flex flex-0 items-center -space-x-1.5">
                        <img
                            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
                            src="assets/images/avatars/female-18.jpg">
                        <img
                            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
                            src="assets/images/avatars/female-11.jpg">
                        <img
                            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
                            src="assets/images/avatars/male-09.jpg">
                        <img
                            class="flex-0 w-10 h-10 rounded-full ring-4 ring-offset-1 ring-gray-800 ring-offset-gray-800 object-cover"
                            src="assets/images/avatars/male-16.jpg">
                    </div>
                    <div class="ml-4 font-medium tracking-tight text-gray-400">More than 17k people joined us, it's your turn</div>
                </div>
            </div>
        </div>
    </div>
</div>
